<template>
    <jb-page title-icon="ic:round-manage-accounts" title-text="服务器运行监控">
        <template #opt>
            <jb-btn :icon="Icons.REFRESH" ghost type="primary" @click="loadData()"
                >刷新</jb-btn
            >
        </template>
        <n-scrollbar class="h-full">
            <n-grid :x-gap="20" :y-gap="20" :cols="2">
                <n-grid-item>
                    <jb-page
                        ref="element1"
                        :bordered="true"
                        title-icon="clarity:host-line"
                        title-text="服务器"
                    >
                        <template #opt>
                            <jb-btn
                                tip-text="刷新"
                                :icon="Icons.RESET"
                                quaternary
                                circle
                                strong
                                @click="loadData('server')"
                            >
                            </jb-btn>
                            <jb-btn
                                tip-text="全屏"
                                :icon="Icons.FULLSCREEN"
                                quaternary
                                circle
                                strong
                                class="mx-8px"
                                @click="toggle1"
                            >
                            </jb-btn>
                        </template>
                        <template #default>
                            <table >
                                <tr>
                                    <td>主机名称</td>
                                    <td>{{ serverList?.serverHostName }}</td>
                                </tr>
                                <tr>
                                    <td>操作系统</td>
                                    <td>{{ serverList?.serverOsName }}</td>
                                </tr>
                                <tr>
                                    <td>系统架构</td>
                                    <td>{{ serverList?.serverOsArch }}</td>
                                </tr>
                                <tr>
                                    <td>服务器IP</td>
                                    <td>{{ serverList?.serverIp }}</td>
                                </tr>
                                <tr>
                                    <td>项目部署目录</td>
                                    <td>{{ serverList?.projectPath }}</td>
                                </tr>
                                <tr>
                                    <td>数据中心ID</td>
                                    <td>{{ serverList?.dataCenterId }}</td>
                                </tr>
                                <tr>
                                    <td>机器ID</td>
                                    <td>{{ serverList?.workId }}</td>
                                </tr>
                            </table>
                        </template>
                    </jb-page>
                </n-grid-item>
                <n-grid-item>
                    <jb-page
                        ref="element2"
                        :bordered="true"
                        title-icon="ph:cpu"
                        title-text="CPU"
                    >
                        <template #opt>
                            <jb-btn
                                tip-text="刷新"
                                :icon="Icons.RESET"
                                quaternary
                                circle
                                strong
                                @click="loadData('cpu')"
                            >
                            </jb-btn>
                            <jb-btn
                                tip-text="全屏"
                                :icon="Icons.FULLSCREEN"
                                quaternary
                                circle
                                strong
                                class="mx-8px"
                                @click="toggle2"
                            >
                            </jb-btn>
                        </template>
                        <template #default>
                            <table>
                                <tr>
                                    <td>名称</td>
                                    <td>{{ cpuList?.cpuName }}</td>
                                </tr>
                                <tr>
                                    <td>数量</td>
                                    <td>{{ cpuList?.cpuCount }}</td>
                                </tr>
                                <tr>
                                    <td>系统使用率</td>
                                    <td>{{ cpuList?.cpuSystemUsed }} %</td>
                                </tr>
                                <tr>
                                    <td>用户使用率</td>
                                    <td>{{ cpuList?.cpuUserUsed }} %</td>
                                </tr>
                                <tr>
                                    <td>当前等待率</td>
                                    <td>{{ cpuList?.cpuWait }} %</td>
                                </tr>
                                <tr>
                                    <td>当前空闲率</td>
                                    <td>{{ cpuList?.cpuFree }} %</td>
                                </tr>
                            </table>
                        </template>
                    </jb-page>
                </n-grid-item>
                <n-grid-item>
                    <jb-page
                        ref="element3"
                        :bordered="true"
                        title-icon="mdi:cpu-64-bit"
                        title-text="内存"
                    >
                        <template #opt>
                            <jb-btn
                                tip-text="刷新"
                                :icon="Icons.RESET"
                                quaternary
                                circle
                                strong
                                @click="loadData('memory')"
                            >
                            </jb-btn>
                            <jb-btn
                                tip-text="全屏"
                                :icon="Icons.FULLSCREEN"
                                quaternary
                                circle
                                strong
                                class="mx-8px"
                                @click="toggle3"
                            >
                            </jb-btn>
                        </template>
                        <template #default>
                            <table>
                                <tr>
                                    <td>总内存</td>
                                    <td>{{ memoryList?.memoryTotal }} GB</td>
                                    <td>{{ memoryList?.jvmMemoryTotal }} MB</td>
                                </tr>
                                <tr>
                                    <td>使用</td>
                                    <td>{{ memoryList?.memoryUsed }} GB</td>
                                    <td>{{ memoryList?.jvmMemoryUsed }} MB</td>
                                </tr>
                                <tr>
                                    <td>剩余</td>
                                    <td>{{ memoryList?.memoryFree }} GB</td>
                                    <td>{{ memoryList?.jvmMemoryFree }} MB</td>
                                </tr>
                                <tr>
                                    <td>使用率</td>
                                    <td>{{ memoryList?.memoryRate }} %</td>
                                    <td>{{ memoryList?.jvmMemoryRate }} %</td>
                                </tr>
                            </table>
                        </template>
                    </jb-page>
                </n-grid-item>
                <n-grid-item>
                    <jb-page
                        ref="element4"
                        :bordered="true"
                        title-icon="clarity:host-line"
                        title-text="JVM"
                    >
                        <template #opt>
                            <jb-btn
                                tip-text="刷新"
                                :icon="Icons.RESET"
                                quaternary
                                circle
                                strong
                                @click="loadData('jvm')"
                            >
                            </jb-btn>
                            <jb-btn
                                tip-text="全屏"
                                :icon="Icons.FULLSCREEN"
                                quaternary
                                circle
                                strong
                                @click="toggle4"
                            >
                            </jb-btn>
                        </template>
                        <template #default>
                            <table>
                                <tr>
                                    <td>名称</td>
                                    <td>{{ jvmList?.jvmName }}</td>
                                </tr>
                                <tr>
                                    <td>版本</td>
                                    <td>{{ jvmList?.jvmVersion }}</td>
                                </tr>
                                <tr>
                                    <td>路径</td>
                                    <td>{{ jvmList?.jvmHome }}</td>
                                </tr>
                                <tr>
                                    <td>启动时间</td>
                                    <td>{{ jvmList?.jvmStarttime }}</td>
                                </tr>
                                <tr>
                                    <td>运行时长</td>
                                    <td>{{ jvmList?.jvmRunUsedTime }}</td>
                                </tr>
                            </table>
                        </template>
                    </jb-page>
                </n-grid-item>
            </n-grid>

            <n-grid :x-gap="20" :y-gap="20" :cols="1" class="mt-10">
                <n-grid-item class="h-300px">
                    <jb-crud-page
                        ref="element5"
                        :bordered="true"
                        height="auto"
                        :search-btn-shown="false"
                        :pager="false"
                        title-icon="clarity:host-line"
                        title-text="磁盘"
                        search-url="/api/admin/serverMonitor/disk"
                    >
                        <template #opt>
                            <jb-btn
                                tip-text="刷新"
                                :icon="Icons.RESET"
                                quaternary
                                circle
                                strong
                                @click="element5?.loadData()"
                            >
                            </jb-btn>
                            <jb-btn
                                tip-text="全屏"
                                :icon="Icons.FULLSCREEN"
                                quaternary
                                circle
                                strong
                                @click="toggle5"
                            >
                            </jb-btn>
                        </template>
                        <template #default="{ list }">
                            <vxe-table
                                ref="tableRef"
                                border
                                :column-config="{ resizable: true }"
                                show-header-overflow
                                show-overflow="tooltip"
                                :row-config="{ isHover: true }"
                                align="center"
                                :data="list"
                            >
                                <jb-column field="name" title="名称"></jb-column>
                                <jb-column field="dirName" title="卷标"></jb-column>
                                <jb-column field="sysTypeName" title="类型"> </jb-column>
                                <jb-column field="typeName" title="路径"> </jb-column>
                                <jb-column field="total" title="总量"> </jb-column>
                                <jb-column field="free" title="未分配"> </jb-column>
                                <jb-column field="used" title="可用"> </jb-column>
                                <jb-column field="usable" title="已用"> </jb-column>
                                <jb-column field="usedRate" title="使用率">
                                    <template #default="{ row }">
                                        {{ row?.usedRate }}%
                                    </template>
                                </jb-column>
                            </vxe-table>
                        </template>
                    </jb-crud-page>
                </n-grid-item>
                <n-grid-item>
                    <jb-crud-page
                        ref="element6"
                        :bordered="true"
                        :search-btn-shown="false"
                        :pager="false"
                        title-icon="clarity:host-line"
                        :title-text="`缓存服务:${cacheType}`"
                    >
                        <template #opt>
                            <jb-btn
                                tip-text="刷新"
                                :icon="Icons.RESET"
                                quaternary
                                circle
                                strong
                                @click="loadData('cache')"
                            >
                            </jb-btn>
                            <jb-btn
                                tip-text="全屏"
                                :icon="Icons.FULLSCREEN"
                                quaternary
                                circle
                                strong
                                @click="toggle6"
                            >
                            </jb-btn>
                        </template>
                        <template #default>
                            <vxe-table
                                ref="tableRef"
                                border
                                :column-config="{ resizable: true }"
                                show-header-overflow
                                show-overflow="tooltip"
                                :row-config="{ isHover: true, height: 100 }"
                                align="center"
                                :data="cacheList"
                            >
                                <jb-column
                                    type="seq"
                                    title="序号"
                                    width="60"
                                    fixed="left"
                                ></jb-column>
                                <jb-column
                                    field="configName"
                                    title="ConfigName"
                                    min-width="120"
                                    fixed="left"
                                ></jb-column>
                                <jb-column field="enable" title="State" width="120">
                                    <template #default="{ row }">
                                        <n-tag
                                            :type="
                                                row.enable == 'true' ? 'success' : 'error'
                                            "
                                            >{{
                                                row?.enable == 'true' ? '启用' : '未启用'
                                            }}</n-tag
                                        >
                                    </template>
                                </jb-column>
                                <template v-if="cacheType == 'redis'">
                                    <jb-column field="host" title="Host" min-width="120">
                                    </jb-column>
                                    <jb-column field="port" title="Port" min-width="120">
                                    </jb-column>
                                    <jb-column
                                        field="password"
                                        title="Timeout"
                                        min-width="120"
                                    ></jb-column>
                                    <jb-column
                                        field="database"
                                        title="Database"
                                        min-width="120"
                                    ></jb-column>
                                    <jb-column
                                        field="clientName"
                                        title="ClientName"
                                        min-width="120"
                                    ></jb-column>
                                    <jb-column
                                        field="expires"
                                        title="Expires"
                                        min-width="120"
                                    >
                                    </jb-column>
                                    <jb-column
                                        field="maxTotal"
                                        title="maxTotal"
                                        min-width="120"
                                    >
                                    </jb-column>
                                    <jb-column
                                        field="maxIdle"
                                        title="maxIdle"
                                        min-width="200"
                                    >
                                    </jb-column>
                                    <jb-column
                                        field="minIdle"
                                        title="minIdle"
                                        min-width="200"
                                    >
                                    </jb-column>
                                    <jb-column
                                        field="maxWaitMillis"
                                        title="maxWaitMillis"
                                        min-width="200"
                                    >
                                    </jb-column>
                                    <jb-column
                                        field="blockWhenExhausted"
                                        title="blockWhenExhausted"
                                        min-width="200"
                                    >
                                    </jb-column>
                                    <jb-column
                                        field="testWhileIdle"
                                        title="testWhileIdle"
                                        min-width="120"
                                    >
                                    </jb-column>
                                    <jb-column
                                        field="timeBetweenEvictionRunsMillis"
                                        title="timeBetweenEvictionRunsMillis"
                                        min-width="240"
                                    >
                                    </jb-column>
                                    <jb-column
                                        field="minEvictableIdleTimeMillis"
                                        title="minEvictableIdleTimeMillis"
                                        min-width="240"
                                    >
                                    </jb-column>
                                </template>
                                <template v-else>
                                    <jb-column
                                        field="initialCapacity"
                                        title="initialCapacity"
                                        min-width="120"
                                    >
                                    </jb-column>
                                    <jb-column
                                        field="maximumSize"
                                        title="maximumSize"
                                        min-width="120"
                                    >
                                    </jb-column>
                                    <jb-column
                                        field="expireAfterWrite"
                                        title="expireAfterWrite"
                                        min-width="160"
                                    ></jb-column>
                                    <jb-column
                                        field="expireAfterWriteTimeUnit"
                                        title="expireAfterWriteTimeUnit"
                                        min-width="200"
                                    ></jb-column>
                                    <jb-column
                                        field="expireAfterAccess"
                                        title="expireAfterAccess"
                                        min-width="200"
                                    ></jb-column>
                                    <jb-column
                                        field="expireAfterAccessTimeUnit"
                                        title="expireAfterAccessTimeUnit"
                                        min-width="240"
                                    >
                                    </jb-column>
                                    <jb-column
                                        field="refreshAfterWrite"
                                        title="refreshAfterWrite"
                                        min-width="200"
                                    >
                                    </jb-column>
                                    <jb-column
                                        field="refreshAfterWriteTimeUnit"
                                        title="refreshAfterWriteTimeUnit"
                                        min-width="200"
                                    >
                                    </jb-column>
                                    <jb-column
                                        field="weakKeys"
                                        title="weakKeys"
                                        min-width="120"
                                    >
                                    </jb-column>
                                    <jb-column
                                        field="weakValues"
                                        title="weakValues"
                                        min-width="120"
                                    >
                                    </jb-column>
                                    <jb-column
                                        field="softValues"
                                        title="softValues"
                                        min-width="200"
                                    >
                                    </jb-column>
                                    <jb-column
                                        field="recordStats"
                                        title="recordStats"
                                        min-width="200"
                                    >
                                    </jb-column>
                                </template>
                                <jb-column title="操作" fixed="right" min-width="160">
                                    <template #default="{ row }">
                                        <jb-btn
                                            tip-text="清空缓存"
                                            confirm-text="确认清空该缓存？"
                                            ghost
                                            :url="`/api/admin/redis/clearCurrentDatabaseAllDatas?cacheName=${row.configName}`"
                                            :icon="Icons.DELETE"
                                            type="error"
                                            strong
                                            >清空缓存</jb-btn
                                        >
                                    </template>
                                </jb-column>
                            </vxe-table>
                        </template>
                    </jb-crud-page>
                </n-grid-item>
            </n-grid>
        </n-scrollbar>
    </jb-page>
</template>
<script setup lang="ts">
import {computed, onMounted, ref} from 'vue'
import { useFullscreen } from '@vueuse/core/index'
import { Icons } from '@/constants'
import { JBoltApi } from '@/utils/request'
import { ResData } from '@/typings/request'
import {storeToRefs} from "pinia";
import {useThemeStore} from "@/store";

const { darkMode } = storeToRefs(useThemeStore())

const tableHoverColor = computed(()=>{
    return  darkMode.value ? '#333237' : '#fafafc'
})

const element1 = ref<any>(null)
const element2 = ref<any>(null)
const element3 = ref<any>(null)
const element4 = ref<any>(null)
const element5 = ref<any>(null)
const element6 = ref<any>(null)

const { toggle: toggle1 } = useFullscreen(element1)
const { toggle: toggle2 } = useFullscreen(element2)
const { toggle: toggle3 } = useFullscreen(element3)
const { toggle: toggle4 } = useFullscreen(element4)
const { toggle: toggle5 } = useFullscreen(element5)
const { toggle: toggle6 } = useFullscreen(element6)

const serverList = ref<any>(null)
const memoryList = ref<any>(null)
const jvmList = ref<any>(null)
const cpuList = ref<any>(null)
const cacheList = ref<any>([])
const cacheType = ref<any>('')

async function loadData(name?: string) {
    if (name) {
        const { error, result } = await JBoltApi.get<ResData>(
            `/api/admin/serverMonitor/${name}`
        )
        if (error) return
        if (name != 'cache') {
            eval(`${name}List`).value = result.data
        } else {
            processCacheData(result.data)
        }
        return
    } else {
        const urls = [
            '/api/admin/serverMonitor/server',
            '/api/admin/serverMonitor/memory',
            '/api/admin/serverMonitor/jvm',
            '/api/admin/serverMonitor/cpu',
            '/api/admin/serverMonitor/cache'
        ]
        const requests: ResData[] = urls.map((url) => JBoltApi.get<ResData>(url))
        const results = await Promise.all(requests)
        serverList.value = results[0].result.data
        memoryList.value = results[1].result.data
        jvmList.value = results[2].result.data
        cpuList.value = results[3].result.data
        processCacheData(results[4].result.data)
    }
}

function processCacheData(cacheData: any) {
    console.log('缓存', cacheData)
    cacheType.value = cacheData.cacheType
    const keys = Object.keys(cacheData.cacheMap)
    cacheList.value = keys.length
        ? keys.map((k) => ({
              configName: k,
              ...cacheData.cacheMap[k]
          }))
        : []
}

onMounted(() => {
    loadData()
})
</script>

<style scoped>
table {
    border-collapse: collapse;
}
tr td {
    border-bottom: 1px solid #efeff5;
    padding: 10px;
    cursor: pointer;
}
tr:last-child td {
    border-bottom: none;
}
tr:hover td {
    background-color: v-bind(tableHoverColor);
}
</style>
